<template>
  <div class="footerbar" ref="footerbar">
    <menu class="menu">
      <button class="menu__item active" style="--bgColorItem: #ff8c00">
        
<svg t="1617327559388" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7146" width="200" height="200"><path d="M873.931034 356.987586l-176.551724-155.895172v-88.275862h176.551724z" fill="#2c2c2c" p-id="7147"></path><path d="M1024 525.417931L512 81.390345 0 525.417931h110.697931v417.191724h324.502069v-211.862069h153.6v211.862069h324.502069V525.417931H1024zM674.251034 854.333793v-211.862069H349.748966v211.862069h-153.6v-383.117241L512 195.972414l315.851034 280.540689V854.510345h-153.6z" fill="#2c2c2c" p-id="7148"></path></svg>        
      </button>

      <button class="menu__item" style="--bgColorItem: #f54888">
     
<svg t="1617328063566" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16733" width="200" height="200"><path d="M504.954 1023.366c-278.057 0-503.461-225.452-503.461-503.46 0-278.058 225.404-503.46 503.46-503.46 278.01 0 503.462 225.402 503.462 503.46 0 278.008-225.452 503.46-503.461 503.46z m0-943.988c-243.294 0-440.527 197.234-440.527 440.528 0 243.293 197.233 440.48 440.527 440.48 243.294 0 440.48-197.187 440.48-440.48 0-243.294-197.186-440.528-440.48-440.528z m31.467 755.191h-62.934V677.19H284.691v-62.884h188.796v-94.399H284.691v-62.934h153.598L284.206 239.326l53.964-34.133 156.022 220.313h35.733l139.488-208.531 52.315 35.006-137.163 204.99h140.653v62.935H542.481l-6.061 9.017v85.382h188.797v62.884H536.421v157.38z" fill="#2c2c2c" p-id="16734"></path></svg>      </button>

      <button class="menu__item" style="--bgColorItem: #4343f5">
     
        <svg t="1617327652208" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9092" width="200" height="200"><path d="M919.296 104.704c37.845333 37.845333 25.6 118.570667-24.746667 218.154667A425.024 425.024 0 0 1 938.666667 512c0 235.648-191.018667 426.666667-426.666667 426.666667-67.925333 0-132.138667-15.872-189.141333-44.117334-99.584 50.346667-180.309333 62.592-218.154667 24.746667-37.845333-37.845333-25.6-118.570667 24.746667-218.154667A425.024 425.024 0 0 1 85.333333 512C85.333333 276.352 276.352 85.333333 512 85.333333c67.925333 0 132.138667 15.872 189.141333 44.096 99.584-50.346667 180.288-62.570667 218.154667-24.725333zM169.6 766.592l-2.069333 4.906667c-10.026667 24.661333-16.533333 46.634667-19.370667 65.066666l-0.746667 5.397334c-2.346667 19.861333-0.042667 29.482667 2.56 32.085333 2.56 2.581333 12.202667 4.885333 32.064 2.538667 20.629333-2.453333 46.208-9.898667 75.370667-22.144a429.696 429.696 0 0 1-87.808-87.850667z m685.098667-373.546667l-3.477334 5.504c-48.853333 76.928-115.754667 160.533333-196.309333 242.026667l-7.146667 7.189333-7.04 6.997334c-83.498667 82.56-169.216 150.784-247.68 199.936C430.293333 867.648 470.336 874.666667 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667 0-41.664-7.04-81.706667-19.968-118.976zM512 149.333333C311.701333 149.333333 149.333333 311.701333 149.333333 512c0 131.157333 69.632 246.058667 173.952 309.76 87.232-49.088 185.898667-125.930667 279.232-219.242667 93.312-93.333333 170.154667-192 219.264-279.253333C758.058667 218.965333 643.157333 149.333333 512 149.333333z m329.962667-1.92c-20.629333 2.453333-46.208 9.898667-75.349334 22.144a430.442667 430.442667 0 0 1 87.808 87.850667c12.266667-29.162667 19.712-54.741333 22.165334-75.370667 2.346667-19.861333 0.042667-29.482667-2.56-32.085333-2.56-2.581333-12.202667-4.885333-32.064-2.538667z" p-id="9093" fill="#2c2c2c"></path></svg>
      </button>

      <button class="menu__item" style="--bgColorItem: #e0b115">
     
<svg t="1617328210773" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18129" width="250" height="250" data-spm-anchor-id="a313x.7781069.0.i22"><path d="M784.344 938.278c-12.192 0-23.923-3.469-33.94-10.041l-32.314-20.83c-1.648-0.879-4.025-2.303-6.403-4.525l-18.779-12.422c-72.405 9.644-143.027-2.402-204.866-35.003-11.388-6.009-15.664-19.959-9.535-31.141 2.93-5.386 7.926-9.4 13.875-11.161a23.77 23.77 0 0 1 17.847 1.782c55.295 29.164 119.103 39.127 184.489 28.76a23.837 23.837 0 0 1 16.805 3.628l28.817 19.034c0.96 0.641 1.899 1.361 2.767 2.133l33.136 21.387c4.369 2.884 9.106 3.175 16.355 0.886 4.138-2.856 6.562-7.232 6.562-12.008v-58.643c0.004-7.657 3.887-14.818 10.36-19.091 65.017-42.872 103.829-110.157 103.829-179.972 0-16.419-1.899-32.42-5.63-47.574-3.359-13.51-8.458-27.183-15.09-40.615-5.648-11.427-0.801-25.192 10.839-30.741 11.664-5.538 25.638-0.783 31.286 10.64 8.096 16.352 14.297 33.118 18.478 49.838 4.62 18.74 6.952 38.394 6.952 58.452 0 81.326-42.444 159.365-114.186 211.01v46.695c0 21.787-12.188 42.072-31.811 52.942a23.049 23.049 0 0 1-3.476 1.58c-9.378 3.36-17.998 5-26.367 5m-36.158-63.157l0.025 0.032-0.025-0.032M281.533 849.288c-10.222 0-20.444-2.569-29.525-7.444-19.37-9.889-32.129-30.624-32.129-52.591v-75.126C121.903 647.898 63.816 545.146 63.816 436.903c0-193.641 181.789-351.181 405.225-351.181 223.46 0 405.246 157.54 405.246 351.181 0 193.638-181.786 351.174-405.246 351.174-22.138 0-44.803-1.697-67.465-5.042l-36.112 23.481c-1.736 1.417-3.27 2.385-4.319 3.033l-46.791 30.287c-8.717 5.973-20.562 9.452-32.821 9.452m187.508-717.565c-197.616 0-358.388 136.908-358.388 305.18 0 96.41 54.313 188.202 145.291 245.541 6.714 4.231 10.775 11.529 10.771 19.363v87.445c0 4.865 3.019 9.793 7.317 12.008 6.041 3.235 12.465 1.548 14.02 0.514l46.586-30.184c0.709-0.436 1.006-0.627 1.052-0.627 0 0 0 0.021-0.025 0.053a20.79 20.79 0 0 1 2.583-1.963l45.058-29.323a23.879 23.879 0 0 1 16.876-3.504c23.165 3.887 46.334 5.85 68.858 5.85 197.638 0 358.412-136.904 358.412-305.173 0.001-168.272-160.773-305.18-358.411-305.18M334.659 771.927c0 0.011-0.025 0.021-0.025 0.032 0-0.011 0.025-0.018 0.025-0.032" p-id="18130" fill="#2c2c2c"></path><path d="M364.833 433.714c0 21.624-17.957 39.265-39.974 39.265-22.017 0-39.978-17.641-39.978-39.265 0-21.62 17.96-39.258 39.978-39.258 22.017 0 39.974 17.637 39.974 39.258z m147.162 7.518c0 19.544-16.238 35.488-36.14 35.488-19.905 0-36.137-15.944-36.137-35.488 0-19.548 16.231-35.492 36.137-35.492 19.901 0 36.14 15.945 36.14 35.492z m133.035 0c0 19.544-16.238 35.488-36.137 35.488-19.906 0-36.14-15.944-36.14-35.488 0-19.548 16.235-35.492 36.14-35.492 19.899 0 36.137 15.945 36.137 35.492z" p-id="18131" fill="#2c2c2c"></path></svg>      </button>

      <button class="menu__item" style="--bgColorItem: #65ddb7">
     
<svg t="1617327516983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5755" width="200" height="200"><path d="M511.488 64c141.376 0 256 114.624 256 256 0 89.6-46.037333 168.469333-115.754667 214.186667A449.514667 449.514667 0 0 1 912.64 758.4c13.290667 26.282667 24.618667 63.936 33.962667 112.938667A74.666667 74.666667 0 0 1 873.28 960H150.72a74.666667 74.666667 0 0 1-73.365333-88.661333c9.344-48.96 20.672-86.592 33.92-112.853334A449.728 449.728 0 0 1 371.605333 534.4 255.68 255.68 0 0 1 255.488 320c0-141.376 114.602667-256 256-256zM512 576c-146.773333 0-278.656 82.773333-343.573333 211.328-10.176 20.117333-19.882667 52.394667-28.202667 96a10.666667 10.666667 0 0 0 10.474667 12.672h722.581333a10.666667 10.666667 0 0 0 10.496-12.672c-8.341333-43.626667-18.069333-75.946667-28.224-96.064A384.533333 384.533333 0 0 0 512 576z m-0.512-448a192 192 0 1 0 0 384 192 192 0 0 0 0-384z" p-id="5756" fill="#2c2c2c"></path></svg>      </button>

      <div class="menu__border"></div>
    </menu>

    <div class="svg-container">
      <svg viewBox="0 0 202.9 45.5">
        <clipPath
          id="menu"
          clipPathUnits="objectBoundingBox"
          transform="scale(0.0049285362247413 0.021978021978022)"
        >
          <path
            d="M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7
          c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5
          c9.2,3.6,17.6,4.2,23.3,4H6.7z"
          />
        </clipPath>
      </svg>
    </div>
  </div>
</template>
<script>
export default {
	props:{
		loginRoute:String
	},
  mounted() {
	
	//   js效果
    let vm = this;
    const body = this.$refs.footerbar;
    // console.log(this.$router);
    const bgColorsBody = [
      "#ffb457",
      "#ff96bd",
      "#9999fb",
      "#ffe797",
      "#cffff1",
    ];
    const menu = body.querySelector(".menu");
    const menuItems = menu.querySelectorAll(".menu__item");
    const menuBorder = menu.querySelector(".menu__border");
    let activeItem = menu.querySelector(".active");

    // 点击后跳转的函数
    function clickItem(item, index, rter) {
      switch (index) {
        case 0:

          if (vm.$route.name !== "home") {
            rter.push("home");
          }
          break;
        case 1:
         	
          if (vm.$route.name !== "Renting") {
            rter.push("Renting");
          }
          break;
        case 2:
        	
          if (vm.$route.name !== "community") {
            rter.push("community");
          }
          break;
        case 3:
         	
          if (vm.$route.name !== "message") {
            rter.push("message");
          }
          break;
        case 4:
          	
          if (vm.$route.name !== vm.loginRoute) {
            rter.push(vm.loginRoute);
          }
          break;
        default:
          break;
      }

      
      menu.style.removeProperty("--timeOut");

      if (activeItem == item) return;
      

      if (activeItem) {
        activeItem.classList.remove("active");
      }

      item.classList.add("active");
      //   body.style.backgroundColor = bgColorsBody[index];
      activeItem = item;
      offsetMenuBorder(activeItem, menuBorder);
    }

    function offsetMenuBorder(element, menuBorder) {
      const offsetActiveItem = element.getBoundingClientRect();
      const left =
        Math.floor(
          offsetActiveItem.left -
            menu.offsetLeft -
            (menuBorder.offsetWidth - offsetActiveItem.width) / 2
        ) + "px";
      menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;
    }

    offsetMenuBorder(activeItem, menuBorder);

    menuItems.forEach((item, index) => {
      var rter = this.$router;
      item.addEventListener("click", () => clickItem(item, index, rter));
    });

    window.addEventListener("resize", () => {
      offsetMenuBorder(activeItem, menuBorder);
      menu.style.setProperty("--timeOut", "none");
    });
  },
};
</script>
<style >
html {
  box-sizing: border-box;
  --bgColorMenu: #035e4c;
  --duration: 0.7s;
}

html *,
html *::before,
html *::after {
  box-sizing: inherit;
}

.footerbar {
  margin: 0;
  display: flex;
  height: 80px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  /* background-color: rgb(240, 66, 66); */
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration);
  width: 100%;
}

 .menu {
  margin: 0;
  display: flex;
  /* Works well with 100% width  */
  /* width: 32.05em; */
  width: 100%;
  font-size: 1.5em;
  padding: 0 2.85em;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  bottom: -14px;
}

 .menu__item {
  all: unset;
  flex-grow: 1;
  z-index: 100;
  display: flex;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  align-items: center;
  will-change: transform;
  justify-content: center;
  padding: 0.55em 0 0.85em;
  transition: transform var(--timeOut, var(--duration));
}

 .menu__item::before {
  content: "";
  z-index: -1;
  width: 4.2em;
  height: 4.2em;
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
  transition: background-color var(--duration), transform var(--duration);
}

 .menu__item.active {
  transform: translate3d(0, -0.8em, 0);
}

 .menu__item.active::before {
  transform: scale(1);
  background-color: var(--bgColorItem);
}

 .icon {
  width: 2.6em;
  height: 2.6em;
  stroke: white;
  fill: transparent;
  stroke-width: 1pt;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
}

 .menu__item.active .icon {
  animation: strok 1.5s reverse;
}

@keyframes strok {
  100% {
    stroke-dashoffset: 400;
  }
}

 .menu__border {
  left: 0;
  bottom: 99%;
  width: 10.9em;
  height: 2.4em;
  position: absolute;
  clip-path: url(#menu);
  will-change: transform;
  background-color: #fff;
  transition: transform var(--timeOut, var(--duration));
}

 .svg-container {
  width: 0;
  height: 0;
}

@media screen and (max-width: 50em) {
  .menu {
    font-size: 0.8em;
  }
}

</style>